<template>
  <div class="header-container">
    <!-- 顶部标题栏 -->
    <div class="titlt-box">
      <!-- 返回级标题 -->
      <div class="title">
        <div class="page-back" @click="Hooks.handlePageBack">
          <i class="iconfont icon-fanhui"></i>
          <span>返回</span>
        </div>
        <div class="title-content">{{ title }}</div>
      </div>
      <!-- 提交及上下按钮 -->
      <div class="btn-group">
        <div v-if="isQuery">
          <a-button
            type="primary"
            class="querybtn"
            :disabled="prData.index === 0"
            @click="Hooks.handlePrevClick"
            >上一个</a-button
          >
          <a-button
            type="primary"
            :disabled="prData.index === prData.seriesList.length - 1"
            class="querybtn"
            @click="Hooks.handleNextClick"
            >下一个</a-button
          >
        </div>
        <div v-if="isSumbit">
          <a-button type="primary" class="submitbtn" @click="Hooks.handleSubmit"
            >提交</a-button
          >
        </div>
      </div>
    </div>
    <!-- 顶部工具栏 -->
    <div class="tool">
      <ToolBar />
      <ToolBarRight v-bind="{ isShowYay, yay, disabled }" />
    </div>
  </div>
</template>
<script lang="ts" setup name="ProcessHeader">
import { inject } from "vue";
import ToolBar from "./components/ToolBar.vue";
import ToolBarRight from "./components/ToolBarRight.vue";
import usePage from "./hooks/usePage";
import * as Store from "@/store";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  isQuery: {
    type: Boolean,
    default: false,
  },
  isSumbit: {
    type: Boolean,
    default: false,
  },
  isShowYay: {
    type: Boolean,
    default: false,
  },
  yay: {
    type: Boolean,
    default: (undefined as unknown) as boolean,
  },
  disabled: {
    type: Boolean,
    default: false
  }
});
const prData = Store.useProcessData();
const provideState = inject("provideState", { getToolBarItem: new Function() });
const Hooks = usePage(provideState);
</script>
<style lang="less" scoped>
.header-container {
  .titlt-box {
    width: 100%;
    height: 54px;
    background: linear-gradient(
      180deg,
      rgba(12, 30, 33, 0.8) 3.6%,
      rgba(4, 29, 50, 0.8) 98.26%
    );
    color: #d2effc;
    padding: 9px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    user-select: none;
  }
  .titlt-box .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &-content {
      padding-left: 12px;
    }
  }
  .titlt-box .page-back {
    padding-right: 12px;
    border-right: 1px solid #d2effc;
    cursor: pointer;
    span {
      padding-left: 12px;
    }
  }
  .btn-group {
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    .querybtn {
      width: 76px;
      height: 32px;
      border-radius: 2px;
    }
    .querybtn:nth-of-type(1) {
      margin-right: 12px;
    }
    .submitbtn {
      width: 96px;
      height: 32px;
      border-radius: 2px;
    }
    .arco-btn-disabled {
      background: rgba(68, 142, 151, 0.5);
      opacity: 0.5;
    }
  }
  .tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 54px;
    background: #04101d;
    padding: 0px 12px;
  }
}
</style>
